<template>
  <div class="orders-page">
    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm">
        <!-- 导航栏容器 -->
        <div class="px-6 pt-6">
          <!-- 小标签 -->
          <div
            class="text-sm text-gray-900 dark:text-gray-100 font-medium mb-4"
          >
            我的订单
          </div>

          <!-- 订单状态标签页 -->
          <el-tabs v-model="activeTab" class="orders-tabs">
            <el-tab-pane label="全部订单" name="all">
              <template #label>
                全部订单
                <el-badge
                  v-if="orderCounts.all"
                  :value="orderCounts.all"
                  class="ml-2"
                />
              </template>
            </el-tab-pane>

            <el-tab-pane label="待付款" name="unpaid">
              <template #label>
                待付款
                <el-badge
                  v-if="orderCounts.unpaid"
                  :value="orderCounts.unpaid"
                  class="ml-2"
                  type="warning"
                />
              </template>
            </el-tab-pane>

            <el-tab-pane label="待入住" name="paid">
              <template #label>
                待入住
                <el-badge
                  v-if="orderCounts.paid"
                  :value="orderCounts.paid"
                  class="ml-2"
                  type="primary"
                />
              </template>
            </el-tab-pane>

            <el-tab-pane label="已完成" name="completed">
              <template #label>
                已完成
                <el-badge
                  v-if="orderCounts.completed"
                  :value="orderCounts.completed"
                  class="ml-2"
                  type="success"
                />
              </template>
            </el-tab-pane>

            <el-tab-pane label="已取消" name="cancelled">
              <template #label>
                已取消
                <el-badge
                  v-if="orderCounts.cancelled"
                  :value="orderCounts.cancelled"
                  class="ml-2"
                  type="info"
                />
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 搜索和筛选 -->
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
          <div class="flex items-center gap-4">
            <el-input
              v-model="searchQuery"
              placeholder="输入订单号/商品名称搜索"
              class="!w-64"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>

            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="dateShortcuts"
              value-format="YYYY-MM-DD"
            />

            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </div>

        <!-- 订单列表 -->
        <div class="orders-list px-6">
          <div
            v-for="order in ordersList"
            :key="order.orderNo"
            class="order-card"
          >
            <!-- 订单头部 -->
            <div class="order-header">
              <div class="order-info">
                <span class="order-time">{{
                  formatDateTime(order.createTime)
                }}</span>
                <span class="order-number">订单号：{{ order.orderNo }}</span>
              </div>
              <div class="order-status">
                <el-tag :type="getStatusType(order.status)">
                  {{ getStatusText(order.status, order.type) }}
                </el-tag>
              </div>
            </div>

            <!-- 订单内容 -->
            <div class="order-content" @click="handleViewDetail(order)">
              <!-- 酒店订单 -->
              <template v-if="order.type === 'hotel'">
                <div class="hotel-order">
                  <el-image
                    :src="order.booking?.roomImage"
                    class="hotel-image"
                  />
                  <div class="content-wrapper">
                    <h4 class="title">{{ order.booking?.hotelName }}</h4>
                    <p class="subtitle">{{ order.booking?.roomName }}</p>
                    <div class="info">
                      <span>{{
                        formatDateTime(order.booking?.checkIn, "YYYY-MM-DD")
                      }}</span>
                      <el-icon class="mx-2"><ArrowRight /></el-icon>
                      <span>{{
                        formatDateTime(order.booking?.checkOut, "YYYY-MM-DD")
                      }}</span>
                      <span>({{ order.booking?.nights }}晚)</span>
                    </div>
                  </div>
                  <div class="price-wrapper">
                    <div class="price">
                      ¥{{ order.payableAmount.toFixed(2) }}
                    </div>
                    <div class="quantity">{{ order.booking?.roomCount }}间</div>
                  </div>
                </div>
              </template>

              <!-- 门票订单 -->
              <template v-else-if="order.type === 'ticket'">
                <div class="ticket-order">
                  <el-image
                    :src="order.booking?.spotImage"
                    class="ticket-image"
                  />
                  <div class="content-wrapper">
                    <h4 class="title">{{ order.booking?.spotName }}</h4>
                    <p class="subtitle">{{ order.booking?.ticketName }}</p>
                    <div class="info">
                      <span
                        >游玩日期：{{
                          formatDateTime(order.booking?.visitDate, "YYYY-MM-DD")
                        }}</span
                      >
                      <span
                        >游客：{{
                          order.booking?.visitors?.length || 1
                        }}人</span
                      >
                    </div>
                  </div>
                  <div class="price-wrapper">
                    <div class="price">
                      ¥{{ order.payableAmount.toFixed(2) }}
                    </div>
                    <div class="quantity">{{ order.booking?.quantity }}张</div>
                  </div>
                </div>
              </template>

              <!-- 特色体验订单 -->
              <template v-else-if="order.type === 'experience'">
                <div class="experience-order">
                  <el-image
                    :src="order.booking?.experienceImage"
                    class="experience-image"
                  />
                  <div class="content-wrapper">
                    <h4 class="title">{{ order.booking?.experienceName }}</h4>
                    <p class="subtitle">{{ order.booking?.experienceType }}</p>
                    <div class="info">
                      <span
                        >体验日期：{{
                          formatDateTime(
                            order.booking?.experienceDate,
                            "YYYY-MM-DD",
                          )
                        }}</span
                      >
                      <span>体验时间：{{ order.booking?.experienceTime }}</span>
                      <span
                        >参与人数：{{
                          order.booking?.participants?.length || 1
                        }}人</span
                      >
                    </div>
                  </div>
                  <div class="price-wrapper">
                    <div class="price">
                      ¥{{ order.payableAmount.toFixed(2) }}
                    </div>
                    <div class="quantity">含服务费</div>
                  </div>
                </div>
              </template>

              <!-- 导游预约订单 -->
              <template v-else-if="order.type === 'guide'">
                <div class="guide-order">
                  <el-image
                    :src="order.booking?.guideAvatar"
                    class="guide-image"
                  />
                  <div class="content-wrapper">
                    <h4 class="title">{{ order.booking?.guideName }}</h4>
                    <p class="subtitle">
                      {{ order.booking?.routeName || "导游服务" }}
                    </p>
                    <div class="info">
                      <span
                        >预约日期：{{
                          formatDateTime(order.booking?.guideDate, "YYYY-MM-DD")
                        }}</span
                      >
                      <span>开始时间：{{ order.booking?.guideTime }}</span>
                      <span>参与人数：{{ order.booking?.people || 1 }}人</span>
                    </div>
                  </div>
                  <div class="price-wrapper">
                    <div class="price">
                      ¥{{ order.payableAmount.toFixed(2) }}
                    </div>
                    <div class="quantity">导游服务</div>
                  </div>
                </div>
              </template>

              <!-- 商品订单 -->
              <template v-else>
                <div
                  v-for="item in order.items"
                  :key="item.id"
                  class="product-order"
                >
                  <el-image :src="item.image" class="product-image" />
                  <div class="content-wrapper">
                    <h4 class="title">{{ item.title }}</h4>
                    <p class="subtitle">{{ item.specs }}</p>
                  </div>
                  <div class="price-wrapper">
                    <div class="price">¥{{ item.price.toFixed(2) }}</div>
                    <div class="quantity">x{{ item.quantity }}</div>
                  </div>
                </div>
              </template>
            </div>

            <!-- 订单操作 -->
            <div class="order-actions">
              <template v-if="order.status === 'unpaid'">
                <el-button type="primary" @click="handlePayment(order)">
                  立即付款
                </el-button>
                <el-button @click="handleCancel(order)">取消订单</el-button>
              </template>

              <template v-if="order.status === 'completed'">
                <template v-if="order.type === 'hotel'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预订
                  </el-button>
                </template>
                <template v-else-if="order.type === 'ticket'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次购票
                  </el-button>
                </template>
                <template v-else-if="order.type === 'experience'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预订
                  </el-button>
                </template>
                <template v-else-if="order.type === 'guide'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预约
                  </el-button>
                </template>
                <template v-else>
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次购买
                  </el-button>
                </template>
                <el-button @click="handleDelete(order)">删除订单</el-button>
              </template>

              <template v-if="order.status === 'paid'">
                <template v-if="order.type === 'hotel'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预订
                  </el-button>
                </template>
                <template v-else-if="order.type === 'ticket'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次购票
                  </el-button>
                </template>
                <template v-else-if="order.type === 'experience'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预订
                  </el-button>
                </template>
                <template v-else-if="order.type === 'guide'">
                  <el-button type="primary" @click="handleBuyAgain(order)">
                    再次预约
                  </el-button>
                </template>
                <el-button @click="handleDelete(order)">删除订单</el-button>
              </template>

              <el-button @click="handleViewDetail(order)">订单详情</el-button>
            </div>
          </div>

          <!-- 空状态 -->
          <el-empty v-if="!ordersList.length" :description="getEmptyText()">
            <el-button type="primary" @click="$router.push('/shop')">
              去逛逛
            </el-button>
          </el-empty>
        </div>

        <!-- 分页 -->
        <div v-if="ordersList.length" class="pagination">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :total="totalCount"
            :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import dayjs from "dayjs";

const router = useRouter();
const activeTab = ref("all");
const searchQuery = ref("");
const dateRange = ref([]);
const page = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const cancelDialogVisible = ref(false);
const currentOrder = ref(null);

// 格式化日期时间
const formatDateTime = (date, format = "YYYY-MM-DD HH:mm:ss") => {
  return date ? dayjs(date).format(format) : "";
};

// 订单数量统计
const orderCounts = ref({
  all: 0,
  unpaid: 0,
  paid: 0,
  completed: 0,
  cancelled: 0,
});

// 日期快捷选项
const dateShortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 取消原因选项
const cancelReasons = [
  { label: "我不想买了", value: "mind_changed" },
  { label: "信息填写错误，重新拍", value: "wrong_info" },
  { label: "商品价格较贵", value: "expensive" },
  { label: "重复下单", value: "duplicate" },
  { label: "其他原因", value: "other" },
];

// 取消订单表单
const cancelForm = ref({
  reason: "",
  detail: "",
});

// 取消订单表单校验规则
const cancelRules = {
  reason: [{ required: true, message: "请选择取消原因", trigger: "change" }],
  detail: [
    { required: true, message: "请输入具体原因", trigger: "blur" },
    { min: 5, message: "原因描述不能少于5个字符", trigger: "blur" },
  ],
};

// 订单列表数据
const ordersList = ref([]);

// 获取订单列表
const getOrders = async () => {
  try {
    // TODO: 调用获取订单列表API
    // const { data } = await api.getOrders({
    //   page: page.value,
    //   pageSize: pageSize.value,
    //   status: activeTab.value === 'all' ? '' : activeTab.value,
    //   keyword: searchQuery.value,
    //   startDate: dateRange.value?.[0],
    //   endDate: dateRange.value?.[1]
    // })
    // ordersList.value = data.list
    // totalCount.value = data.total
    // orderCounts.value = data.counts

    // 模拟数据
    ordersList.value = [
      {
        orderNo: "ORDER123456",
        type: "hotel",
        createTime: "2024-01-25 10:30:00",
        status: "paid",
        payableAmount: 1073.6,
        booking: {
          hotelName: "贵港大酒店",
          roomName: "豪华大床房",
          roomImage: "/images/hotels/room1.jpg",
          checkIn: "2024-02-01",
          checkOut: "2024-02-03",
          nights: 2,
          roomCount: 1,
        },
      },
      {
        orderNo: "ORDER123457",
        type: "ticket",
        createTime: "2024-01-24 15:20:00",
        status: "paid",
        payableAmount: 158.4,
        booking: {
          spotName: "贵港博物馆",
          ticketName: "成人票",
          spotImage: "/images/spots/museum.jpg",
          visitDate: "2024-02-01",
          quantity: 2,
          visitors: [{ name: "张三" }, { name: "李四" }],
        },
      },
      {
        orderNo: "ORDER123458",
        type: "experience",
        createTime: "2024-01-23 14:30:00",
        status: "paid",
        payableAmount: 258.4,
        booking: {
          experienceName: "贵港非遗体验 - 传统手工艺制作",
          experienceType: "文化体验",
          experienceImage: "/images/experiences/craft.jpg",
          experienceDate: "2024-02-01",
          experienceTime: "14:00-16:00",
          participants: [{ name: "张三" }, { name: "小明" }],
        },
      },
      {
        orderNo: "ORDER123459",
        type: "product",
        createTime: "2024-01-24 15:20:00",
        status: "completed",
        payableAmount: 188.0,
        items: [
          {
            id: 1,
            title: "贵港特色手工艺品",
            specs: "规格：标准款",
            price: 99,
            quantity: 1,
            image: "/images/products/product1.jpg",
          },
        ],
      },
      {
        orderNo: "ORDER123460",
        type: "guide",
        createTime: "2024-01-25 10:30:00",
        status: "paid",
        payableAmount: 380.0,
        booking: {
          guideId: 1,
          guideName: "李明 - 导游服务",
          routeName: "贵港文化精华一日游",
          guideAvatar: "/images/guides/guide1.jpg",
          guideDate: "2024-03-20",
          guideTime: "09:00",
          people: 2,
          contactPerson: {
            name: "张三",
            phone: "13800138000",
            idNumber: "110101199001011234",
          },
        },
      },
    ];
    totalCount.value = 100;
    orderCounts.value = {
      all: 50,
      unpaid: 2,
      paid: 3,
      completed: 4,
      cancelled: 1,
    };
  } catch (error) {
    console.error("获取订单列表失败:", error);
    ElMessage.error("获取订单列表失败");
  }
};

// 获取订单状态类型
const getStatusType = (status) => {
  const typeMap = {
    unpaid: "warning",
    paid: "primary",
    processing: "success",
    completed: "success",
    cancelled: "info",
  };
  return typeMap[status] || "info";
};

// 获取订单状态文本
const getStatusText = (status, orderType) => {
  const textMap = {
    unpaid: "待付款",
    paid:
      orderType === "hotel"
        ? "待入住"
        : orderType === "ticket"
          ? "待使用"
          : orderType === "experience"
            ? "待体验"
            : orderType === "guide"
              ? "待导游"
              : "待收货",
    processing:
      orderType === "hotel"
        ? "入住中"
        : orderType === "ticket"
          ? "使用中"
          : orderType === "experience"
            ? "体验中"
            : orderType === "guide"
              ? "服务中"
              : "配送中",
    completed: "已完成",
    cancelled: "已取消",
  };
  return textMap[status] || "未知状态";
};

// 获取空状态文本
const getEmptyText = () => {
  const textMap = {
    all: "暂无任何订单",
    unpaid: "暂无待付款订单",
    paid: "暂无待使用/待入住订单",
    completed: "暂无已完成订单",
    cancelled: "暂无已取消订单",
  };
  return textMap[activeTab.value] || "暂无订单";
};

// 格式化价格
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};

// 计算商品总数量
const getTotalQuantity = (items) => {
  return items.reduce((total, item) => total + item.quantity, 0);
};

// 处理搜索
const handleSearch = () => {
  page.value = 1;
  getOrders();
};

// 重置搜索
const resetSearch = () => {
  searchQuery.value = "";
  dateRange.value = [];
  page.value = 1;
  getOrders();
};

// 查看订单详情
const handleViewDetail = (order) => {
  switch (order.type) {
    case "hotel":
      router.push({
        name: "HotelOrderDetail",
        params: { id: order.orderNo },
      });
      break;
    case "ticket":
      router.push({
        name: "TicketOrderDetail",
        params: { id: order.orderNo },
      });
      break;
    case "experience":
      router.push({
        name: "ExperienceOrderDetail",
        params: { id: order.orderNo },
      });
      break;
    case "guide":
      router.push({
        name: "GuideOrderDetail",
        params: { id: order.orderNo },
      });
      break;
    default:
      router.push({
        name: "OrderDetail",
        params: { id: order.orderNo },
      });
  }
};

// 处理支付
const handlePayment = (order) => {
  router.push({
    path: "/order/payment",
    query: { orderNumber: order.orderNo },
  });
};

// 取消订单
const handleCancel = async (order) => {
  currentOrder.value = order;
  cancelForm.value = {
    reason: "",
    detail: "",
  };
  cancelDialogVisible.value = true;
};

// 提交取消订单
const submitCancelOrder = async () => {
  if (!currentOrder.value) return;

  try {
    // TODO: 调用取消订单API
    // await api.cancelOrder({
    //   orderId: currentOrder.value.id,
    //   ...cancelForm.value
    // })

    ElMessage.success("订单已取消");
    cancelDialogVisible.value = false;
    getOrders();
  } catch (error) {
    console.error("取消订单失败:", error);
    ElMessage.error("取消订单失败");
  }
};

// 再次购买/预订
const handleBuyAgain = (order) => {
  switch (order.type) {
    case "hotel":
      router.push(`/hotel/${order.booking.hotelId}`);
      break;
    case "ticket":
      router.push(`/spots/${order.booking.spotId}`);
      break;
    case "experience":
      router.push(`/experiences/${order.booking.experienceId}`);
      break;
    case "guide":
      router.push(`/tour-guide/${order.booking.guideId}`);
      break;
    default:
      router.push(`/shop/product/${order.items[0].id}`);
  }
};

// 删除订单
const handleDelete = async (order) => {
  try {
    await ElMessageBox.confirm("确定要删除该订单吗？", "删除订单", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    // TODO: 调用删除订单API
    // await api.deleteOrder(order.id)

    ElMessage.success("订单已删除");
    getOrders();
  } catch (error) {
    if (error === "cancel") return;
    console.error("删除订单失败:", error);
    ElMessage.error("删除订单失败");
  }
};

// 处理分页变化
const handlePageChange = (newPage) => {
  page.value = newPage;
  getOrders();
};

const handlePageSizeChange = (newSize) => {
  pageSize.value = newSize;
  page.value = 1;
  getOrders();
};

// 监听标签页变化
watch(activeTab, () => {
  page.value = 1;
  getOrders();
});

// 页面加载时获取数据
onMounted(() => {
  getOrders();
});
</script>

<style lang="scss" scoped>
.orders-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300;

  .orders-tabs {
    :deep(.el-tabs__header) {
      @apply mb-6;
      border-bottom: 1px solid var(--el-border-color-light);

      .el-tabs__nav-wrap::after {
        @apply bg-transparent;
      }

      .el-tabs__item {
        @apply text-gray-600 dark:text-gray-400 transition-colors duration-300;

        .el-badge__content {
          @apply transform scale-90 origin-top-right;
        }

        &.is-active {
          @apply text-primary-600 dark:text-primary-400;
        }

        &:hover:not(.is-active) {
          @apply text-primary-500 dark:text-primary-300;
        }
      }
    }
  }

  .search-bar {
    @apply flex items-center space-x-4;

    .search-input {
      @apply w-80;
    }
  }

  .orders-list {
    @apply space-y-6;

    .order-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md;

      .order-header {
        @apply p-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-700;

        .order-info {
          @apply space-x-4;

          .order-number {
            @apply text-gray-600 dark:text-gray-400;
          }

          .order-time {
            @apply text-sm text-gray-500 dark:text-gray-500;
          }
        }

        .el-tag {
          @apply transform transition-transform duration-300;

          &:hover {
            @apply transform scale-105;
          }
        }
      }

      .order-content {
        @apply divide-y divide-gray-100 dark:divide-gray-700;

        .hotel-order,
        .ticket-order,
        .experience-order,
        .guide-order,
        .product-order {
          @apply p-4 flex items-center gap-4 cursor-pointer transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700;

          .el-image {
            @apply flex-shrink-0 rounded-lg overflow-hidden;

            &.hotel-image,
            &.ticket-image,
            &.experience-image,
            &.guide-image {
              @apply w-32 h-32;
            }

            &.product-image {
              @apply w-24 h-24;
            }
          }

          .content-wrapper {
            @apply flex-1;

            .title {
              @apply text-lg font-medium mb-2 dark:text-gray-100 line-clamp-1;
            }

            .subtitle {
              @apply text-gray-600 dark:text-gray-400 mb-2;
            }

            .info {
              @apply text-sm text-gray-500 dark:text-gray-500 flex flex-wrap gap-4;
            }
          }

          .price-wrapper {
            @apply text-right;

            .price {
              @apply text-lg font-medium text-primary-600 dark:text-primary-400;
            }

            .quantity {
              @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
            }
          }
        }
      }

      .order-actions {
        @apply p-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-600 flex items-center justify-end gap-2;

        .el-button {
          @apply transition-all duration-300;

          &:hover {
            @apply transform scale-105;
          }

          &.el-button--primary {
            @apply shadow-sm hover:shadow;
          }
        }
      }
    }
  }

  .pagination {
    @apply mt-8 flex justify-center;

    :deep(.el-pagination) {
      @apply bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-colors duration-300;

      .el-pagination__total {
        @apply text-gray-600 dark:text-gray-400;
      }

      .el-pagination__jump {
        @apply text-gray-600 dark:text-gray-400;
      }

      .el-input__inner {
        @apply bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600;
      }

      button {
        @apply bg-transparent border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400;

        &:disabled {
          @apply bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600;
        }

        &:hover:not(:disabled) {
          @apply bg-gray-100 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
        }
      }

      .el-pager li {
        @apply bg-transparent border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400;

        &.active {
          @apply bg-primary-500 dark:bg-primary-600 text-white border-primary-500 dark:border-primary-600;
        }

        &:hover:not(.active) {
          @apply bg-gray-100 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
        }
      }
    }
  }
}

// 添加订单卡片动画
.order-card {
  animation: slideIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 为每个订单添加延迟动画
@for $i from 1 through 10 {
  .order-card:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}

// 添加空状态动画
.el-empty {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
